<template>
	<view>
		<u-dropdown @open="hideBorder = true" @close="hideBorder = false" ref="uDropdown" menu-icon="arrow-down-fill"
		 :menu-icon-size="10" :border-bottom="false" active-color="#488EF5">
			<u-dropdown-item :title="titleTime" class="u-drawer-member">
				<view class="slot-content">
					<view class="u-flex u-p-t-20 u-p-l-30 u-p-r-30" style="background:#fff;height: 120rpx;border-bottom:1px solid #eee;justify-content: space-around;">
						<u-button throttle-time="0" hover-class="activeBtn" :hair-line="false" :class="{'activeBtn': timeIndex === i}"
						 class="custom-style" v-for="(v,i) in timeList" :key="i" @click="setType(v,i,'timeType')">{{v.name}}</u-button>
					</view>
					<!-- <view style="background:#fff;" class="u-p-t-20 u-p-l-40 u-p-r-30 u-p-b-30">
						<u-row>
							<u-col span="4">
								<span style="color:#333333" class="u-font-13">自定义日期</span>
							</u-col>
							<u-col span="8" align="right">
								<u-form-item label="" :border-bottom="false" label-position="left" label-width="150">
									<u-input style="border-radius:20px;padding-left:20px;" v-model="time" border type="time" placeholder="年/月/日"
									 @click="showTime" />
									<u-icon name="clock" style="position:relative;left:-30px;color:#ccc" size="35"></u-icon>
								</u-form-item>
							</u-col>
						</u-row>
					</view> -->
					<view style="border-top:1px solid #eee;"></view>
					<u-button plain :hair-line="false" style="border:none;border-radius:0 0 12px 12px;color:#488EF5" @click="closeDropdown">确定</u-button>
				</view>
			</u-dropdown-item>
			<u-dropdown-item :title="energyName" class="u-drawer-member">
				<view class="slot-content">
					<view class="u-flex u-p-t-20 u-p-l-30 u-p-r-30" style="background:#fff;height: 120rpx;border-bottom:1px solid #eee;">
						<u-button throttle-time="0" hover-class="activeBtn" :hair-line="false" :class="{'activeBtn': energyIndex === i}"
						 class="custom-style" v-for="(v,i) in energyList" :key="i" @click="setType(v,i,'energyType')">{{v.name}}</u-button>
					</view>
					<view style="border-top:1px solid #eee;"></view>
					<u-button plain :hair-line="false" style="border:none;border-radius:0 0 12px 12px;color:#488EF5" @click="closeDropdown">确定</u-button>
				</view>
			</u-dropdown-item>
		</u-dropdown>
		<u-picker v-model="timeShow" mode="time" @confirm="confirmTime" :params="timeParams"></u-picker>
		<view style="height:6px;width:100%;background:#f5f5f5"></view>
		<u-tabs ref="uTabs" bar-width="110" bar-height="4" :list="list" activeColor="#488EF5" font-size="30" :is-scroll="false"
		 :current="tabCurrent" @change="tabsChange"></u-tabs>
		<view class="content">
			<view class="box">
				<scroll-view scroll-y style="height: 100vh;width: 100%;" @scrolltolower="reachBottom">
					<u-row class="row" v-for="(item,index) in resultList" :key="index">
					<u-col span="2" text-align="center">
						<u-image v-if="index ===0" style="margin: 0 auto;" src="/static/img/loveforest/number_one.png" width="40" height="40" mode="aspectFit"></u-image>
						<u-image v-else-if="index ===1" style="margin: 0 auto;" src="/static/img/loveforest/number_two.png" width="40" height="40" mode="aspectFit"></u-image>
						<u-image v-else-if="index ===2" style="margin: 0 auto;" src="/static/img/loveforest/number_three.png" width="40" height="40" mode="aspectFit"></u-image>
						<span v-else>{{index+1}}</span>
					</u-col>
					<u-col span="7">
						<view class="u-line-1">
							<span class="name u-p-r-10">{{item.orgName}}</span>
						</view>
					</u-col>
					<u-col span="3" class="u-line-1">
						<view class="u-line-1">
							<!-- <u-image v-if="item.isCollect == '0'" style="float:right;" src="/static/img/loveforest/enter.png" width="80" height="80" mode="aspectFit"></u-image> -->
							<view style="float:right;line-height:40px;margin-right:6px;" class="u-font-15 u-line-1 u-text-right">
								<span v-if="interfaceType == 3 || interfaceType == 1">{{item.totalEnergy || 0}}g</span>
								<span v-if="interfaceType == 4 || interfaceType == 2">{{item.avgEnergy || 0}}g</span>
							</view>
						</view>
					</u-col>
				</u-row>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				timeList: [{
						name: '本月',
						value: 4
					},{
						name: '本周',
						value: 5
					},{
						name: '今年',
						value: 2
					},
					{
						name: '去年',
						value: 1
					},
					{
						name: '全部',
						value: 3
					},
				],
				energyList: [{
						name: '集团公司排名',
						value: 1
					},
					{
						name: '组织部门排名',
						value: 2
					},
				],
				energyIndex: 0,
				time: "",
				timeIndex: 0,
				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: true
				},
				hideBorder: true,
				titleTime: "今年",
				energyName: "集团公司排名",
				list: [{
						name: '人均能量排名'
					},
					{
						name: '总排名'
					}
				],
				tabCurrent: 0,
				resultList: [],
				pageIndex: 1,
				pageSize: 10,
				pageTotal: 0,
				timeValue: 3,
				energyValue: 1,
				interfaceType: 3
			}
		},
		onShow () {
			this.loadData()
		},
		methods: {
			closeDropdown() {
				this.pageIndex = 1
				this.$refs.uDropdown.close();
				this.loadData()
			},
			tabsChange(e) {
				this.tabCurrent = e
				this.pageIndex = 1
				this.loadData()
			},
			setType(v, i, type) {
				switch (type) {
					case "timeType":
						this.timeIndex = i
						this.titleTime = this.timeList[i].name
						this.time = ""
						this.timeValue = v.value
						break;
					case "energyType":
						this.energyIndex = i
						this.energyName = this.energyList[i].name
						this.energyValue = v.value
						break;
					default:
						;
				}
			},
			confirmTime(e) {
				this.time = e.year + "-" + e.month + "-" + e.day
				this.timeIndex = null
				this.titleTime = this.time
			},
			showTime() {
				this.timeShow = true
			},
			reachBottom() {
				if (this.pageIndex < this.pageTotal) {
					this.pageIndex += 1
					this.loadData()
				}
			},
			loadData() {
				if (this.tabCurrent === 0) {
					this.interfaceType = this.energyValue === 1 ? 2 : 4
				} else {
					this.interfaceType = this.energyValue === 1 ? 1 : 3
				}
				let params = {
					currentPage: this.pageIndex,
					pageSize: 10,
					type: this.timeValue,
					interfaceType: this.interfaceType
				}
				this.$u.api.energySortList(params).then(res => {
					this.handleData(res)
				}).catch(res => {
					this.$u.toast(res.msg)
				})

		},
		handleData(res) {
			let _total = res.pagination.total % 10
			if (_total == 0) {
				_total = parseInt(res.pagination.total / 10)
			} else {
				_total = parseInt(res.pagination.total / 10) + 1
			}
			if (this.pageIndex == 1) {
				this.resultList = res.list || []
			} else {
				this.resultList.push(...res.list)
			}
			this.pageTotal = _total
		},
	}
	}
</script>
<style scoped lang="scss">
	page {
		background: #fff;
	}

	.content {
		.row {
			padding: 16px 16px 16px 6px;
			border-top: 1px solid #eee;
			position: relative;
			top: -2px;

			.name {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}

			.dep {
				font-size: 24rpx;
				color: #333333;
			}

			.des {
				color: #999999;
				font-size: 24rpx;
				margin-top: 4px;
			}
		}

		// .hideBorder {
		// 	border-top:none;
		// }

	}

	/deep/ .u-drawer-member {
		.custom-style {
			width: 180rpx !important;
			background: #fff !important;
			height: 64rpx !important;
			float: left !important;
			margin: 0 14rpx 20rpx 0 !important;
			border: 1px solid #ccc !important;
			font-size: 24rpx !important;
			color: #999999 !important;
			border-radius: 30px;
		}

		.activeBtn {
			background: #488EF5 !important;
			color: #fff !important;
			border: 0 !important;
		}
	}
	.rf-no-data {
		margin-top: 30px;
		padding-bottom: 20px;
		text-align: center;
		color: #cccccc;
	}
	.rf-upload-tip {
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		color: #cccccc;
	}
</style>
